<template>
  <main id="main" ref="main" style="width: 100%;height:100%;"></main>
</template>

<script lang="js">
const echarts = require("echarts")
export default {
  name: "cBar",
  props: {
    barData: {
      type: Object,
      default: () => ({
        xAxis: [],
        dataList: []
      })
    },
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  mounted() {
    const chart = echarts.init(this.$refs['main'])
    const option = {
      title: {
        text: this.title,
        textStyle: {
          color: "#484D78",
          fontSize: 12,
          fontWeight: "normal"
        }
      },
      grid: {
        top: '15%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: this.barData.xAxis,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#484D78',
              fontSize: 12
            }
          }
        }
      ],
      yAxis: {
        show: false
      },
      series: [
        {
          type: 'bar',
          barWidth: 20,
          emphasis: {
            itemStyle: {
              barBorderWidth: 1,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          },
          label: {
            show: true,
            position: 'top'
          },
          data: this.barData.dataList
        }
      ]
    };
    chart.setOption(option);
  }
}
</script>

<style scoped lang="stylus">

</style>
